<template>

  <!--
    	作者：luoyiming
    	时间：2020-06-3
    	描述：权限管理-修改菜单&权限
    -->
  <el-dialog title="修改菜單&權限" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-form size="small" :model="formData" :rules="formRules" ref="form">
      <!--菜单名称-->
      <el-form-item label="菜單名稱" prop="name" :label-width="formLabelWidth">
        <el-input v-model="formData.name" autocomplete="off" placeholder="請輸入菜單名稱"></el-input>
      </el-form-item>
      <el-form-item label="繁體菜單名稱" prop="name" :label-width="formLabelWidth">
        <el-input v-model="formData.nameHk" autocomplete="off" placeholder="請輸入菜單名稱"></el-input>
      </el-form-item>
      <el-form-item label="英文菜單名稱" prop="name" :label-width="formLabelWidth">
        <el-input v-model="formData.nameEn" autocomplete="off" placeholder="請輸入菜單名稱"></el-input>
      </el-form-item>
      <!--类型-->
      <el-form-item label="類型" prop="name" :label-width="formLabelWidth">
        <el-radio-group v-model="formData.isRoute">
          <el-radio :label="1">頁面</el-radio>
          <el-radio :label="0">按鈕</el-radio>
          <el-radio :label="2">獨立單頁面</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--上级菜单-->
      <el-form-item label="上級菜單" prop="parentId" :label-width="formLabelWidth">
        <el-cascader size="small" v-model="parentsVal" :options="accessList" :props="propsParam"
          @change="handleChange"></el-cascader>
      </el-form-item>
      <!--路径-->
      <el-form-item label="路徑" prop="path" :label-width="formLabelWidth">
        <el-input v-model="formData.path" autocomplete="off" placeholder="請輸入組件文件路徑"
          :disabled="formData.path == '/plus'"></el-input>
        <p>提示：對應前端給的文件路徑，例如：index/index</p>
      </el-form-item>
      <!--图标-->
      <el-form-item label="圖標" :label-width="formLabelWidth">
        <el-input v-model="formData.icon" autocomplete="off" placeholder="請輸入icon"></el-input>
        <p>提示：請選擇系統提供的圖標</p>
      </el-form-item>
      <!--是否是菜单-->
      <el-form-item label="是否是菜單" :label-width="formLabelWidth" v-if="formData.isRoute == 1">
        <el-radio-group v-model="formData.isMenu">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--是否显示-->
      <el-form-item label="是否顯示" :label-width="formLabelWidth">
        <el-radio-group v-model="formData.isShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--重定向-->
      <el-form-item label="重定向" :label-width="formLabelWidth" v-if="formData.isRoute == 1">
        <el-input v-model="formData.redirectName" autocomplete="off" placeholder="請輸入重定向地址"></el-input>
      </el-form-item>
      <!--备注-->
      <el-form-item label="備註" prop="sort" :label-width="formLabelWidth">
        <el-input v-model="formData.remark" placeholder="請輸入備註" type="textarea"></el-input>
      </el-form-item>
      <!--排序-->
      <el-form-item label="排序" prop="sort" :label-width="formLabelWidth"><el-input v-model="formData.sort"
          placeholder="請輸入排序" type="number"></el-input></el-form-item>
    </el-form>
    <!--操作按钮-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmit()" :disabled="loading">確 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import AccessApi from '@/api/access.js';
import { deepClone } from '@/utils/base.js';
export default {
  data() {
    return {
      /*是否加载中*/
      loading: false,
      /*form表单数据对象*/
      formData: {
        /*菜单名称*/
        name: '',
        /*路由地址*/
        path: '',
        /*组件名*/
        views: '',
        /*别名*/
        alias: '',
        /*图标*/
        icon: '',
        /*是否是菜单*/
        isMenu: 1,
        /*是否是路由*/
        isRoute: 1,
        /*是否显示*/
        isShow: 0,
        /*排序*/
        sort: 1,
        /*父集ID*/
        parentId: 0
      },
      /*验证规则*/
      formRules: {
        name: [{
          required: true,
          message: "請輸入菜單名稱",
          trigger: 'blur'
        }],
        path: [{
          required: true,
          message: "請輸入路徑",
          trigger: 'blur'
        }],
        views: [{
          required: true,
          message: "請輸入組件名稱",
          trigger: 'blur'
        }],
        alias: [{
          required: true,
          message: "請輸入別名",
          trigger: 'blur'
        }]
      },
      /*当前父集ID*/
      parentsVal: [],
      /*菜单列表*/
      accessList: [],
      /*排序*/
      srot: '1',
      /*左边长度*/
      formLabelWidth: '120px',
      /*是否显示*/
      dialogVisible: false,
      /*展示数据*/
      propsParam: {
        label: 'name',
        value: 'accessId',
        checkStrictly: true
      }
    };
  },
  props: {
    open_edit: Boolean,
    add_type: String,
    rawData: Array,
    selectModel: Object
  },
  created() {
    this.dialogVisible = this.open_edit;
    this.accessList = deepClone(this.rawData);
    this.accessList.unshift({
      name: "頂級菜單",
      accessId: 0
    });
    this.formData = deepClone(this.selectModel);
    this.findParentsID(this.accessList);
  },
  methods: {
    /*选择菜单*/
    handleChange(e) { },
    /*查找父集id*/
    findParentsID(list) {
      let flag = false;
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if (item.accessId == this.formData.parentId) {
          this.parentsVal.unshift(item.accessId);
          flag = true;
          break;
        } else {
          let children = item.children;
          if (typeof children != 'undefined' && children != null) {
            if (this.findParentsID(children)) {
              this.parentsVal.unshift(item.accessId);
              flag = true;
              break;
            }
          }
        }
      }
      return flag;
    },
    /*修改菜单*/
    onSubmit() {
      let self = this;
      let params = self.formData;
      if (self.parentsVal.length > 0) {
        params.parentId = self.parentsVal[self.parentsVal.length - 1];
      }
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          AccessApi.editAccess(params, true).then(res => {
            if (res.code == 1) {
              ElMessage({
                message: res.msg,
                type: 'success'
              });
              self.$emit('closeDialog', {
                type: 'success',
                openDialog: false,
                data: params
              });
              self.loading = false;
            }
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      this.$emit('closeDialog', {
        type: 'error',
        openDialog: false
      });
    }
  }
};
</script>
